<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<first></first>
</div>
<script>
    let first= {
        template: `
        <div>这是我的第二个组件
        <br>
        <span @click="change">这是组件的span,{{username}}</span>
        </div>

        `,
        data: function (){
            return {
                username:"加里奥",
            }
        },
        methods:{
            change(){
                alert("不要点我了")
            }
        }
    }
    Vue.component("first",first)
    new Vue({
        el:"#app",
        data:{},
    })

</script>

</body>
</html>